<script setup>
import { onMounted, reactive, ref } from "vue";
import dayjs from "dayjs";
import { get729Time } from './getTime'
import { useTimeStore } from '@/store/index'
import { use } from "echarts";

const allowJump = ref(false)
const playIng = ref(false)

const timeStore = useTimeStore()

let timer = null

const selectData = reactive({
  selectObj: '株洲市防洪态势',
  selectList: [{
    name: '株洲市防洪态势',
  },
  {
    name: '”2019.7.10”暴雨洪水',
  },],
})

const timeData = reactive({
  timeList: [],
  showLabelList: [],
  timeIndex: 0,
  showTimeIndex: 0,
  showTimeIndexList: [0, 3, 7, 13, 17, 29, 39]
})

const emit = defineEmits(['getStatus'])

const changeTime = () => {
  emit('getStatus', selectData.selectObj)
  if (timer) {
    clearInterval(timer)
    timer = null
  }
  timeData.showLabelList = []
  timeData.timeList = []

  if (selectData.selectObj === '”2019.7.10”暴雨洪水') {
    timeData.timeList = get729Time()
    // this.$store.commit('handleTimeValue', '7/29')
    timeStore.handleTimeValue('7/29')
    handelTimeLabel()
    timeData.timeIndex = 0
    allowJump.value = true
  } else {
    allowJump.value = false
    // this.$store.commit('handleTimeValue', 'default')
    timeStore.handleTimeValue('default')
    initShowLabel()
  }
}

const initShowLabel = () => {
  timeData.timeList = []
  let nowTime = Number(dayjs().format('k'))
  for (let i = 0; i < 6; i++) {
    let tvalue = nowTime - i
    if (nowTime - i < 0) {
      tvalue = 24 - (i - nowTime)
    }
    timeData.timeList.unshift({
      name: `${tvalue < 10 ? '0' : ''}${tvalue}:00`,
      value: `${tvalue < 10 ? '0' : ''}${tvalue}:00`,
    })
  }
  handelTimeLabel()
}
const handelTimeLabel = () => {

  if (timeData.timeList.length > 6) {
    //以4的倍数并且取整
    let showIndex = Math.round(timeData.timeList.length / 4)
    timeData.timeList.forEach((item, i) => {
      if (
        i + 1 === 1 ||
        i + 1 === timeData.timeList.length ||
        (i + 1) % showIndex === 0
      ) {
        timeData.showLabelList.push(item)
      }
    })
  } else {
    timeData.showLabelList = timeData.timeList
  }
  if (selectData.selectObj === '株洲市防洪态势') {
    timeData.timeIndex = timeData.timeList.length - 1
    timeStore.handleTimeValue('default')

  }
}


const prev = () => {
  if (allowJump.value) {
    if (timeData.showTimeIndex === 0) {
      timeData.timeIndex = 0
    } else {
      timeData.showTimeIndex--
      timeData.timeIndex = timeData.showTimeIndexList[timeData.showTimeIndex]
    }
    play()
    // this.$store.commit(
    //   'handleTimeValue',
    //   timeData.timeList[timeData.timeIndex].value
    // )
    timeStore.handleTimeValue(timeData.timeList[timeData.timeIndex].value)
  } else {
    if (timeData.timeIndex === 0) {
      timeData.timeIndex = 0
    } else {
      timeData.timeIndex--
    }
    // this.$store.commit('handleTimeValue', 'default')
    timeStore.handleTimeValue('default')
  }
}
const play = () => {
  //万一上次的定时器没有清除  就执行一遍清除
  if (timer) {
    clearInterval(timer)
  }
  playIng.value = true
  if (selectData.selectObj === '”2019.7.10”暴雨洪水') {
    // this.$store.commit(
    //   'handleTimeValue',
    //   timeData.timeList[timeData.timeIndex].value
    // )
    timeStore.handleTimeValue(timeData.timeList[timeData.timeIndex].value)

    timer = setInterval(() => {
      //阶段性开关
      if (
        timeData.timeIndex + 1 ===
        timeData.showTimeIndexList[timeData.showTimeIndex + 1]
      ) {
        pause()
        return
      }
      timeData.timeIndex++
      // this.$store.commit(
      //   'handleTimeValue',
      //   timeData.timeList[timeData.timeIndex].value
      // )
      timeStore.handleTimeValue(timeData.timeList[timeData.timeIndex].value)


      if (timeData.timeIndex === timeData.timeList.length - 1) {
        clearInterval(timer)
      }
    }, 2000)
  }
}
const pause = () => {
  playIng.value = false
  if (timer) {
    clearInterval(timer)
    timer = null
  }
}
const next = () => {
  if (allowJump.value) {
    if (timeData.showTimeIndex === timeData.showTimeIndexList.length - 1) return
    timeData.showTimeIndex++
    timeData.timeIndex = timeData.showTimeIndexList[timeData.showTimeIndex]
    play()
    // this.$store.commit(
    //   'handleTimeValue',
    //   timeData.timeList[timeData.timeIndex].value
    // )
    timeStore.handleTimeValue(timeData.timeList[timeData.timeIndex].value)

  } else {
    if (timeData.timeIndex === timeData.timeList.length - 1) return
    timeData.timeIndex++
    // this.$store.commit('handleTimeValue', 'default')
    timeStore.handleTimeValue('default')

  }
}
const reset = () => {
  clearInterval(timer)
  timeData.timeIndex = 0
  play()
}

onMounted(() => {
  initShowLabel()
  emit('getStatus', selectData.selectObj)
})
</script>



<template>
  <div class="time-line">
    <div class="left-select">
      <el-select v-model="selectData.selectObj" @change="changeTime">
        <el-option
          v-for="(option, i) in selectData.selectList"
          :key="i"
          :label="option.name"
          :value="option.name"
        ></el-option>
      </el-select>
    </div>
    <div class="tl-content">
      <div class="base-line" v-if="timeData.showLabelList.length > 0">
        <div
          class="item"
          :class="timeData.showLabelList.indexOf(option) > -1 ? 'long' : ''"
          v-for="(option, i) in timeData.timeList"
          :key="i"
        >
          <el-tooltip
            popper-class="big-tooltip"
            v-if="timeData.timeIndex === i"
            :visible="true"
            :content="
              selectData.selectObj === '株洲市防洪态势'
                ? `${option.value}`
                : `${option.value} ${option.name}`
            "
            placement="top"
          >
            <div class="active-bg"></div>
          </el-tooltip>
          <div
            :class="timeData.timeIndex === i ? 'active-time-desc' : 'time-desc'"
            v-show="timeData.showLabelList.indexOf(option) > -1"
          >
            {{ option.value }}
          </div>
        </div>
      </div>
    </div>
    <div class="right-btn">
      <img src="@/assets/image/timeLine/prev.png" @click="prev" alt="" />
      <img
        src="@/assets/image/timeLine/play.png"
        v-show="!playIng"
        @click="play"
        alt=""
      />
      <img
        src="@/assets/image/timeLine/pause.png"
        v-show="playIng"
        @click="pause"
        alt=""
      />
      <img src="@/assets/image/timeLine/next.png" @click="next" alt="" />
      <img src="@/assets/image/timeLine/reset.png" @click="reset" alt="" />
    </div>
  </div>
</template>

<style lang="less">
.time-line {
  pointer-events: all;
  position: absolute;
  background-color: antiquewhite;
  bottom: 100px;
  height: 50px;
  width: 840px;
  left: calc(50% - 420px);

  background: url(@/assets/image/timeLine/tl-bg.png) no-repeat;
  background-size: 100% 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  .left-select {
    margin-left: 10px;
    width: 150px;

    .el-select {
      .el-select__wrapper {
        background: rgba(18, 52, 80, 0.9);
        border-radius: 2px;
        border: none;
        box-shadow: none;

        span {
          color: #fff !important;
        }
      }
    }
  }

  .tl-content {
    width: 480px;

    .base-line {
      height: 10px;
      width: 100%;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      border-bottom: 2px solid #ccc;
    }

    .item {
      height: 5px;
      width: 2px;
      background-color: #ccc;

      .active-bg {
        height: 13.88px;
        width: 8px;
        background: url(@/assets/image/timeLine/active.png) no-repeat;
        background-size: 100% 100%;
        transform: translate3d(-50%, -2px, 0);
      }

      .time-desc {
        text-align: center;
        width: 70px;
        color: #fff;
        transform: translate3d(-50%, 10px, 0);
        text-wrap: nowrap;
      }

      .active-time-desc {
        text-align: center;
        width: 70px;
        color: #fff;
        transform: translate3d(-50%, 2px, 0);
        text-wrap: nowrap;
      }
    }

    .long {
      height: 10px;
    }
  }

  .right-btn {
    width: 130px;
    margin-right: 10px;

    img {
      cursor: pointer;
      margin-left: 8px;
    }
  }
}
</style>
